壹、前情提要：交接工作進度銜接

一、Package v.s. version問題

• 由flutter能用的機型，主要是本身flutter很新，不少開發者說ios至少要用M1才行

• 90%package不太用，flutter版本容易不相容。

二、更新設備

1. M1 Mac mini v.s. Macbook air

若有機會更新設備的話，搜尋欲使用的設備，目前在考慮M1晶片的Mac mini or Macbook air

如果是MacBook Air M1完全可以照著這個來裝

參自：30 Days of Flutter (Day1): 學習如何在 Macbook Air M1 上安裝 Flutter

三、Clockify與語法

我覺得Package的問題現在很大，語法問題對比起來不太急，2個人要先一塊解決這個問題，後面才能專注研究跟寫出程式碼。clockify的部分之後大家再討論，現在不太重要；語法就到時候寫程式碼的時候一邊寫一邊研究吧！

四、自己的想法

1. 雖然在DAY6時有提過不能以最新的設備當作萬能解(雖然他是)，因為Get新的設備的難度係數在所有解法中，通常都是最高的，但若是真的有機會有的話，真的會很超級無敵開心～省去很多繞路，也會從菜鳥變成上三個輩子都燒了好香的菜鳥♡(〃'▽'〃)♡

2. 而做到目前設備能做的最大盡力值的我們，也能提供未來開發的思路建構與各路Debug解法上的upper bound；相對而言，就算最後的請購沒有成功，也要持續以目前“所擁有的”設備作為規劃與實踐的出發點！

3. 個人還是覺得語法部分比較重要，也會加速pacage使用過程中的進程，也能比較全面，而不是像瞎子摸象。畢竟直接看到一大坨完整的程式碼很容易眼花+不知所措，就如同我們學習前端時也是從button,label等物件開始教起，後面才會導入如Bootstrap等套件，才會知道套件的強大與該如何應用！

4. Clockify自己是希望能提早學會並儘早用於專案中，較能對大家的進度進行有方向的規劃，也可以大幅減少會議中的無效時間，可以提前於共同project中即時知曉大家的進度，而不用一來一回還要用訊息傳送等，而有成果也可以直接展示。這部分是為了節省大家未來更多的研究時間而來！

貳、新設備規格比較

一、macbook air

1.M1 macbook air

M1 macbook air 256GB SSD+16GB RAM：36900$$

參自：選擇你的全新 MacBook Air(M1)

2.M2 macbook air

M2 macbook air 256GB SSD+16GB RAM：43900$$，不考慮

參自：選擇你的全新 MacBook Air(M2)

參自：自訂你的 MacBook Air - 午‍夜‍色

二、mac mini

1. M1 mac mini

M1 mac mini 256GB SSD+16GB RAM：22990$$

參自：Mac mini 256GB M1 晶片 /16GB 記憶體 / 8 CPU / 8 GPU

M1 mac mini 512GB SSD+16GB RAM：28900$$

參自：Mac mini 512GB M1 晶片 / 16GB 記憶體 / 8 CPU / 8 GPU

2. M2 mac mini

參自：選擇你的 Mac mini

M2 mac mini 256GB SSD+16GB RAM：24900$$

參自：自訂你的 Mac mini(M2)256GBSSD+16GBRam

M2 mac mini 512GB SSD+16GB RAM：30900$$

自訂你的 Mac mini(M2)512GBSSD+16GBRam

三、小結

假設要選新設備的話，就spec比較結果而言，覺得M1 Mac mini是對我們最經濟實惠的解法，雖然需要自行配備螢幕與外接設備(但應該都已具備)，加上他在512GB SSD+16GB RAM的前提下也比256GB SSD+16GB RAM的Mac book air價格還要低(Apple的行銷策略上，只要是需要提升RAM或SSD規格，都會各有6000$$的價格差距)，且Mac mini也比較不會有電池損壞的問題！

參、Flutter widgets：Roadmap:

• 建議順序：Basic widgets -> Widget catalog -> widget index
• Flutter documentation：官方文檔會是我們最好的夥伴

我們可以由官方文檔中看到基礎元件(Basic widgets)，並依循學習

參自：Basic widgets
節錄裡面的第一句話： “Widgets you absolutely need to know before building your first Flutter app.”

而待基礎元件熟稔後便可以依序網下列序位前進：
Widget catalog：按照“功能”類別瀏覽元件

參自：Widget catalog

Flutter widget index：按照字母排列，包含所有Flutter中的小元件

參自：Flutter widget index

肆、Basic widgets

Flutter Basic Widgets 共包含這11項：

而每一項點進去以後會跳到我們在Dart語言層經用過的API Docs資料庫，再來我們會以每個對應的官方API Library為主；查詢資料為輔，並配合範例來進行基礎元件的學習。

而平台我們仍採用DartPad作為練習

一、Text

參自：Text class

Text常用的屬性如下：

• textAlign：對齊方式
• maxLine：最大行數
• overflow：配合maxLine使用，可以設定當超過最大行數時的文字效果
• style：TextStyle物件，包含color, fontFamily, background, fontSize
• textSpan：配合Text.rich使用

基礎Text使用

Text(
  'Hello, $_name! How are you?',
  textAlign: TextAlign.center, 
  overflow: TextOverflow.ellipsis,
  style: const TextStyle(fontWeight: FontWeight.bold),
)

利用Text.rich改變文字形式

const Text.rich(
  TextSpan(
    text: 'Hello', // default text style
    children: <TextSpan>[
      TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),//斜體
      TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),//粗體
    ],
  ),
)

實作效果如圖

二、icon

參自：Icon class

我們可以用icons.的方式呼叫內建的icon

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: const <Widget>[
    Icon(
      Icons.favorite, //選取內建icon
      color: Colors.pink, //設定顏色
      size: 24.0, //設定大小
      semanticLabel: 'Text to announce in accessibility modes',
    ),
    Icon(
      Icons.audiotrack,
      color: Colors.green,
      size: 30.0,
    ),
    Icon(
      Icons.beach_access,
      color: Colors.blue,
      size: 36.0,
    ),
  ],
)

實作效果如圖

而我們也可以透過iconfont與官方文件說明來自訂icon

三、Image

參自：Image class

可以用NetworkInternet的方式連結網路上的URL並抓至flutter中

const Image(
  image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)

實作效果如圖

也可以用相對路徑的方式：
過程中也嘗試開啟本機端flutter，今天成功開啟網頁測試端(因為虛擬機要跑太久)

Image(
        image: AssetImage("/Users/csie/Desktop/anya2.jpeg"), //本機圖片相對路徑
        width: 500.0)

實作效果如圖

阿尼亞文字：「教授！M1 mac mini很划算！」

寒假進度目前先到這裡(Basic widgets開頭)～開學再繼續努力！我們下回待續